<template>
    <div class="health-project">
        <Title :title="title" :subtitle="subtitle" />
        <div class="health-project-content">
            <div class="tab-wrapper">
                <div class="tab-header">
                    <button v-for="tab in tabs" :key="tab.id" :class="{ active: activeTab === tab.routerPath }"
                        @click="activeTab = tab.routerPath">
                        {{ tab.name }}
                    </button>
                </div>
                <div class="tab-content">
                    <div class="left">
                        <div class="title">{{ currentName }}</div>
                        <h2>{{ currentDescription.en }}</h2>
                        <div class="content">{{ currentDescription.description }}</div>
                        <NuxtLink :to="localePath(`/projects/${activeTab}`)" class="more-link">了解详情</NuxtLink>
                    </div>

                    <div class="academic-list">
                        <div v-for="item in currentTabData" :key="item.id" class="academic-card">
                            <div class="content">
                                <NuxtLink :to="localePath(`/projects/${activeTab}/${item.id}`)">
                                    <div class="img">
                                        <img :src="fileBase + item.image" alt="">
                                    </div>
                                    <div class="info">
                                        <p class="title">{{ item.title }}</p>
                                        <div class="meta">
                                            <span class="date">{{ formatDate(item.publishDate) }}</span>
                                        </div>
                                    </div>
                                </NuxtLink>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import Title from '@/components/index/Title.vue'
const { $fetchGov } = useNuxtApp()
import { formatDate } from '@/utils/date'
const localePath = useLocalePath()
const { fileBase } = useRuntimeConfig().public

const { data: projects } = await useAsyncData(`projects-${new Date().getTime()}`, () => {
    return $fetchGov(`/app/api/channel/alias/projects`, {
        method: 'GET',
        params: {
            isArticle: true,
            isTree: true,
            articleTotal: 3,
            _t: Date.now()
        }
    });
});

const tabs = computed(() => {
    return projects.value?.data.children || [];
});
const currentName = computed(() => {
    return tabs.value.find(t => t.routerPath === activeTab.value)?.name || '';
});

const localDescriptions = {
    'current': {
        'en': 'CURRENT ITEM',
        'description': '本板块展示实施中的科研项目或合作课题。您可点击了解项目目标、跟踪最新进展动态，并查看阶段性成果。'
    },
    'poverty': {
        'en': 'PREVIOUS ITEM',
        'description': '本板块汇集研究会已顺利结题或圆满完结的项目，涵盖研究成果、社会影响力分析及实践经验等内容。'
    },
    'apply-for': {
        'en': 'APPLY FOR ITEM',
        'description': '本板块公开发布待合作的活动或资助计划。欢迎符合条件的个人或团队提交申请，通过评审后即可启动项目合作，共同推动健康领域科研与实践的进步。'
    }
};

const currentDescription = computed(() => {
    const tab = tabs.value.find(t => t.routerPath === activeTab.value);
    return tab?.description || localDescriptions[tab?.routerPath] || (tab?.name + '项目描述');
});

const activeTab = ref(tabs.value[0]?.routerPath || 'current');

const currentTabData = computed(() => {
    const currentArticles = tabs.value.find(t => t.routerPath === activeTab.value)?.articleList || []
    return currentArticles
})


const title = computed(() => {
    return projects.value?.data?.name || '';
});

const subtitle = 'Health projects'


</script>
<style scoped lang="scss">
@use "@/assets/scss/main" as *;

.health-project {
    width: 1200px;
    margin: auto;

    .health-project-content {
        width: 100%;
        margin-top: 1.5rem;

        .tab-wrapper {
            .tab-header {
                display: flex;
                justify-content: space-between;
                gap: 2rem;

                button {
                    background: url('/images/index-tab-bg.png') no-repeat center/cover;
                    width: calc((100% - 2 * 2rem) / 3);
                    padding: 1.3rem;
                    border: none;
                    border-radius: 5px;
                    cursor: pointer;
                    font-size: 1.2rem;
                    color: #333;
                    transition: all 0.5s;
                    font-weight: bold;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

                    &.active {
                        color: #1867CA;
                    }
                }
            }

            .tab-content {
                display: flex;
                margin-top: 3rem;

                .left {
                    width: 32%;
                    margin-right: 3%;
                    text-align: left;

                    .title {
                        font-size: 1.3rem;
                        color: #1867CA;
                    }

                    h2 {
                        color: rgba(12, 25, 79, .3);
                        margin: .3rem 0 2.5rem;
                    }

                    .content {
                        color: #333333;
                        font-size: 1rem;
                        line-height: 1.6rem;
                    }

                    .more-link {
                        display: inline-block;
                        background: $myprimary-color;
                        padding: .5rem 1.3rem;
                        border-radius: 2rem;
                        text-align: right;
                        font-size: 1rem;
                        color: #fff;
                        text-decoration: none;
                        margin-top: 3rem;
                    }
                }

                .academic-list {
                    gap: 1.5rem;
                    display: flex;
                    justify-content: space-between;
                    width: calc(100% - 32% - 3%);

                    .academic-card {
                        width: calc((100% - 2 * 20px) / 3);
                        background: white;
                        border-radius: 5px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                        transition: transform 0.3s;
                        cursor: pointer;

                        &:hover {
                            transform: translateY(-5px);
                        }

                        .content {
                            a {
                                text-decoration: none;
                            }

                            .img {
                                width: 100%;
                                height: 10rem;

                                img {
                                    width: 100%;
                                    height: 100%;
                                    border-radius: 5px 5px 0 0;
                                    overflow: hidden;
                                }
                            }

                            .info {
                                padding: 1rem;

                                .title {
                                    color: #333;
                                    font-size: 1rem;
                                    line-height: 1.6;
                                    margin-bottom: .5rem;
                                    height: 3rem;
                                    //超过2行省略
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                }

                                .meta {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    color: #666;
                                    font-size: 1rem;
                                }
                            }
                        }
                    }
                }
            }

        }

    }

    @media screen and (max-width: 768px) {
        width: 100%;

        .health-project-content {
            margin-top: 1rem;

            .tab-wrapper {
                .tab-header {
                    button {
                        font-size: .9rem !important;
                        padding: .8rem 0;
                    }
                }
                .tab-content{
                    margin-top: 1rem;
                    display: block;
                    .left{
                        width:100%;
                        margin-right: 0;
                        padding:1rem;
                        .title{
                            font-size:1rem;
                        }
                        h2{
                            font-size:1rem;
                            margin:.3rem 0 1rem;
                        }
                        .more-link{
                            margin-top: 1rem;
                        }
                    }
                    .academic-list{
                        width:100%;
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 0.8rem;
                       .academic-card{
                            width:100%;
                            .content{
                                .img{
                                    height: 8rem;
                                }
                            }
                       }
                    }
                }
            }
        }
    }
}
</style>